iT邦幫忙

0

[JS] You Don't Know JavaScript [this & Object Prototypes] - Object [番外 - getter/setter]

  • 分享至 

  • xImage
  •  

前言

我們在Object [下]中有提到 getter / setter,由於這個部分在書中的解釋是比較舊的版本,所以找過新版的資料後整理在此篇章中。

getter是一種獲取特定屬性的方法,setter是設置特定屬性的方法,getter和setter常被用在:

  1. 對物件初始化
  2. 可以隨時添加屬性到任何物件中

Getter(the get Keyword)

有時候物件屬性會需要回傳動態的數據,或要在不使用明確的方法呼叫(不直接訪問物件屬性)下反映出內部變數的狀態,這樣可以使用getter來達到這個目的,

const obj = {
  log: ['a', 'b', 'c'],
  count: 0,
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    obj.count ++; // 將count綁定給get
    return this.log[this.log.length - obj.count]; // 將log綁定給get
  }
};

for(let i = 0; i< 4; i++){
	console.log(obj.latest); // 呼叫get method以訪問這些被綁定給getter的屬性
}
/*
    c
    b
    a
    undefined
*/

移除getter

getter可以使用Delete操作符移除。

const obj = {
  log: ['a', 'b', 'c'],
  count: 0,
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    obj.count ++; // 將count綁定給get
    return this.log[this.log.length - obj.count]; // 將log綁定給get
  }
};

console.log(obj.latest); // c
delete obj.latest;
console.log(obj.latest); // undefined

新增get到現有物件中

我們除了在一開始建立物件的時候定義getter之外,可以使用defineProperty添加getter給現有物件中

const obj = {
    a: 0
}

Object.defineProperty(obj, 'b', {
    get: function(){
        return this.a + 1;
    }
})
console.log(obj.b); // 1

Setter

setter能在嘗試修改指定屬性時執行給定的函式,Setter最常與Getter一同建立虛擬屬性(pseudo-property)。

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
language.current = 'FA';

console.log(language.log); // ['EN', 'FA']

移除setter

setter可以使用Delete操作符移除。

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
console.log(language.log); // 'EN'

delete language.current;
console.log(language.current); // undefined

新增set到現有物件中

setter一樣也可以通過defineProperty添加setter給現有物件中

const obj = {
    a: 0
};

Object.defineProperty(obj, 'b', { set: function(x) { this.a = x / 2; } });

o.b = 10; 
console.log(o.a) // 5

結論

可以使用 getter / setter 對物件中的屬性進行一些操作,特別是如果想在返回屬性或設置它們之前對值做一些特殊的事情,兩個方法都可以使用defineProperty方法添加 getter/setter 到現有的物件中,也可以使用delete將他們移除。


參考文獻:
Getter 和 Setter 的定義
getter
setter


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言